<template>
	<view class="cont">
		<view class="u-p-l-24 u-p-r-24">
			<view class="u-p-24 bg-white u-m-t-24 u-flex u-col-center u-row-between">
				<view>接收新商机通知</view>
				<u-switch v-model="checked" :active-color="infoColorError"></u-switch>
			</view>
			<block v-if="checked">
				<view class="u-p-24 bg-white u-m-t-24 u-flex u-col-center u-row-between">
					<view>商机推送时间段</view>
					<u-switch v-model="checkedTwo" :active-color="infoColorError"></u-switch>
				</view>
				<view v-if="!checkedTwo">
					<view class="u-p-24 bg-white u-border-top u-flex u-col-center u-row-between" @click="isShow = true">
						<view>开始时间</view>
						<view class="u-light-color">{{startTime}}</view>
					</view>
					<view class="u-p-24 bg-white u-border-top u-flex u-col-center u-row-between" @click="isShow = true">
						<view>结束时间</view>
						<view class="u-light-color">{{endTime}}</view>
					</view>
				</view>
				<view class="u-p-24 bg-white u-m-t-24">
					<view>接收以下地区的商机</view>
					<view class="u-m-t-24">
						<u-checkbox-group @change="checkboxGroup">
							<u-checkbox 
								@change="checkboxChange" 
								v-model="item.checked" 
								v-for="(item, index) in cities" :key="index" 
								:name="item.name"
								shape="circle"
								:active-color="infoColorError"
							>{{item.name}}</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
			</block>
		</view>
		
		<view class="fixed">
			<u-button type="success" @click="onSave">提交保存</u-button>
		</view>
		
		<!-- 时间选择 -->
		<u-select 
			v-model="isShow" 
			mode="mutil-column" 
			:default-value="defaultVal"
			:list="multiSelector" 
			@confirm="confirm"></u-select>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLogin: false,
			
			checked: true,
			checkedTwo: true,
			
			isShow: false,
			
			cities: [
				{
					name: '国外',
					checked: false,
					key: 'abroad'
				},
				{
					name: '全国',
					checked: false,
					key: 'all'
				},
				{
					name: '安徽',
					checked: false,
					key: 'anhui'
				},
				{
					name: '北京',
					checked: false,
					key: 'beijing'
				},
				{
					name: '重庆',
					checked: false,
					key: 'chongqing'
				}
			],
			
			defaultVal: [],
			startTime: '',
			endTime: '',
			multiSelector: [
				[],
				[{ label: ':', value: ':'}],
				[],
				[{ label: '至', value: '至'}],
				[],
				[{ label: ':', value: ':'}],
				[]
			]
		}
	},
	onLoad(query) {
		let check = ['beijing']
		this.cities.forEach(item => {
			item.checked = check.indexOf(item.key) > -1
		})
		let arr = []
		let arr2 = []
		for (let i = 5;i < 24;i++) {
			arr.push({
				label: i < 10 ? ('0' + i) : String(i),
				value: i < 10 ? ('0' + i) : String(i)
			})
		}
		for (let i = 0;i < 6;i++) {
			arr2.push({
				label: i === 0 ? '00' : String(i * 10),
				value: i === 0 ? '00' : String(i * 10)
			})
		}
		this.multiSelector[0] = this.multiSelector[4] = arr
		this.multiSelector[2] = this.multiSelector[6] = arr2
		this.defaultVal = [0, 0, 0, 0, arr.length - 1, 0, 0]
		this.setTime('05:00', '23:00')
	},
	methods: {
		setTime(start, end) {
			this.startTime = start
			this.endTime = end
		},
		checkboxChange(e) {
			// console.log(e)
		},
		checkboxGroup(e) {
			// console.log(e)
		},
		
		confirm(data) {
			console.log(data)
			this.setTime(`${data[0].value}:${data[2].value}`, `${data[4].value}:${data[6].value}`)
		},
		
		onSave() {
		}
	}
}
</script>

<style lang="scss" scoped>
.cont {
	overflow-x: hidden;
	min-height: 100vh;
	padding-bottom: calc(116rpx + env(safe-area-inset-bottom) / 2);
	::v-deep .u-checkbox-group {
		width: 100%;
		.u-checkbox {
			flex: 0 0 33.3% !important;
			margin-bottom: 16rpx;
		}
	}
}
.fixed {
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom) / 2);
	position: fixed;
	left: 24rpx;
	right: 24rpx;
	bottom: 0;
	z-index: 99;
}
</style>
